(function cloud(){
	var webBack = document.getElementById("webBack");
	var webBackHb = webBack.getContext("2d");
	var cloudImg = new Image();
	cloudImg.src = "img/cloud.png";
	var cloudPositions = [
		[0, 50],
		[200, 20],
		[150, 150]
	];
	var cloudSizes = [
		[50, 20],
		[60, 25],
		[80, 30]
	];
	var cloudSpeeds = [
		[0, 0],
		[0, 0],
		[0, 0]
	];
	
	function limit(num, low, high) {
		if (num < low) {
			return low;
		} else if (num > high) {
			return high;
		} else {
			return num;
		}
	}
	
	function updateCloud() {
		webBackHb.clearRect(0, 0, 200, 200);
		for (let i = 0; i < 3; i++) {
			if (Math.random() > 0.99) {
				var sita = Math.random() * Math.PI * 2;
				var speed = 0.05 + Math.random() * 0.1;
				cloudSpeeds[i][0] = Math.cos(sita) * speed;
				cloudSpeeds[i][1] = Math.sin(sita) * speed / 10;
			}
			cloudPositions[i][0] += cloudSpeeds[i][0];
			cloudPositions[i][0] = limit(cloudPositions[i][0], 0, 200);
			cloudPositions[i][1] += cloudSpeeds[i][1];
			cloudPositions[i][1] = limit(cloudPositions[i][1], 0, 200);
			webBackHb.drawImage(cloudImg, cloudPositions[i][0] - cloudSizes[i][0] / 2, cloudPositions[i][1] -
				cloudSizes[i][1] / 2, cloudSizes[i][0], cloudSizes[i][1]);
		}
	}
	setInterval(updateCloud, 20);
})();

(function point(){
	var pointState = 0;
	var webFont = document.getElementById("webFont");
	var webFontContext = webFont.getContext("2d");
	webFontContext.fillStyle = "#FF0000";
	
	function updatePoint() {
		webFontContext.clearRect(0, 0, 200, 200);
		if (pointState > 0) {
			webFontContext.fillRect(118, 107, 3, 3);
		}
		if (pointState > 1) {
			webFontContext.fillRect(124, 107, 3, 3);
		}
		if (pointState > 2) {
			webFontContext.fillRect(129, 107, 3, 3);
		}
		pointState++;
		if (pointState > 3) {
			pointState = 0;
		}
	}
	setInterval(updatePoint, 1000);
})();
